<template>
  <div class="app-container">
    <el-dialog title="组织选择"
               :visible="orgDialogVisible"
               width="50%" height="400px" :before-close="handleClose">
      <div class="el-dialog-div">
        <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="8" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            lazy
            :load="queryDept"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            @node-click="handleNodeClick"
            :highlight-current="true"
          />
        </div>
      </el-col>
    </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="cancel">取 消</el-button>
        <el-button type="primary"  @click="getCheckedNodes">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {deptTreeSelect} from "@/api/system/user";


export default {
  name: "OrgSelect",
  props:{
    orgDialogVisible: {
      type: Boolean,
      default: false,
    },
    //界面有多个地方需要选部门的时候传过来做区别
    funType:{
      type: String
    }
  },
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined,
      selectedNode:null,
      defaultProps: {
        children: "children",
        label: "label"
      },
    }
  },
  created() {
    this.getDeptTree();
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      deptTreeSelect({"deptName":val}).then(response => {
        this.deptOptions = response.data;
      });
    }
  },
  methods:{
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({"parentId":0}).then(response => {
        this.deptOptions = response.data;
      });
    },
    queryDept(node, resolve){
      let data = node.data;
      let params = {};
      if(Array.isArray(data)){
        resolve(data);
        return ;
      }
      if(data !=undefined){
        params = {"parentId":data.id};
        deptTreeSelect(params).then(response => {
          resolve(response.data);
        });
      }else{
        resolve([]);
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleClose(done) {
      this.$emit("update:orgDialogVisible", false);
      done();
      this.selectedNode = null;
    },
    handleNodeClick(data){
      this.selectedNode = data;
    },
    getCheckedNodes(){
      if(this.selectedNode!=null){
        this.$emit("bakdata", this.selectedNode,this.funType);
        this.$emit("update:orgDialogVisible", false);
      }else{
        alert("请选择数据");
      }
    },
    cancel(){
      this.selectedNode = null;
      this.$emit("update:orgDialogVisible", false);
    }
  }
}
</script>

<style scoped>
.el-dialog-div {
  height: 40vh;
  overflow-x: hidden;
}
</style>
